@css-prefix: fish;
@base-font-size: 1rem;
@base-font-color: rgba(0, 0, 0, 0.87);

@color-primary: #2185D0;
@active-background-color: #ecf6fd;
@active-border-color: @color-primary;
@active-color: @color-primary;

@border-color: #e9e9e9; // rgba(34,36,38,.15) #d9d9d9
@border-style: 1px solid @border-color;
@border-radius: 3px;
@menu-item-border-color: #FAFAFA;

@1pxtoem: 0.075;
@2pxtoem: @1pxtoem * 2;

@padding-vertical: .7em;
@padding-horizontal: 1em;

@line-height: 1em;

@layout-side-width: 200px;

@hover-background-color: #f4f5f6; // rgba(0, 0, 0, 0.05);#F3F4F5
@hover-color: @color-primary;
@menu-min-width: 160px;

@input-min-width: 14em;
@input-border-color: #d9d9d9;
@input-padding-horizontal: @padding-horizontal - 0.2;
@input-padding-vertical: @padding-vertical - @1pxtoem * 1.45;
@input-padding: @input-padding-vertical @input-padding-horizontal;
@input-active-color: rgba(16,142,233, .8);
@input-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);

@select-padding: @padding-vertical - @1pxtoem/2 @input-padding-horizontal;

@select-multiple-padding-vertical: @padding-vertical * (1/3);
@select-multiple-padding-left: @padding-vertical * (2/3);
@select-multiple-padding-right: @input-padding-horizontal + 1em;
@select-multiple-padding: @select-multiple-padding-vertical @select-multiple-padding-right @select-multiple-padding-vertical @select-multiple-padding-left;

@select-multiple-child-margin-vertical: @padding-vertical * (2/3);
@select-multiple-child-margin-left: @input-padding-horizontal - @select-multiple-padding-left;
@select-multiple-child-margin: @select-multiple-child-margin-vertical 0 @select-multiple-child-margin-vertical @select-multiple-child-margin-left;

@modal-width: 850px;
@modal-border-radius: 3px;

@warning-color: #ff9700;
@info-color: #108ee9;
@error-color: #f04134;
@success-color: #00a854;

@warning-shadow-color: rgba(255, 191, 0, .5);
@info-shadow-color: rgba(16, 142, 233, .5);
@error-shadow-color: rgba(240, 65, 52, .5);
@success-shadow-color: rgba(0, 168, 84, .5);

@warning-background-color: rgba(255, 191, 0, .15);
@info-background-color: rgba(16, 142, 233, .15);
@error-background-color: rgba(240, 65, 52, .15);
@success-background-color: rgba(0, 168, 84, .15);

@popup-padding: 1em;
@notice-padding: .8em 1em;

//.warning() {
//  box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 transparent;
//  background: #F8FFFF;
//  color: #276F86;
//}
//.info() {
//
//}

.padding() {
  padding: @padding-vertical @padding-horizontal;
}
.box-shadow() {
  box-shadow: 0px 2px 3px 0px @border-color;
  //box-shadow: 0 2px 3px hsla(0,0%,4%,.1), 0 0 0 1px hsla(0,0%,4%,.1);
}
.border() {
  border: @border-style;
}

.user-select(@v) {
  -webkit-user-select: @v;
  -moz-user-select: @v;
  -ms-user-select: @v;
  user-select: @v;
}

.type-basic() {
  font-weight: 400;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(34,36,38,.1) inset;
  &:hover, &.active {
    background-color: #fff;
    //border-color: rgba(0,0,0,0.3);
    box-shadow: 0 0 0 1px rgba(34,36,38,.3) inset;
  }
}
.type-positive() {
  color: #fff;
  background-color: #21BA45;
  &:hover, &.active {
    color: #fff;
    background: #16ab39;
  }
}
.type-negative() {
  color: #fff;
  background-color: #DB2828;
  &:hover, &.active {
    color: #fff;
    background-color: #ca1010;
  }
}
.type-primary() {
  color: #fff;
  background-color: @color-primary;
  &:hover, &.active {
    color: #fff;
    background-color: #1678c2;
  }
}

.colors() {
  &.red {
    color: #fff;
    background-color: #DB2828;
    &:hover, &.active {
      color: #fff;
      background-color: #d01919;
    }
  }
  &.orange {
    color: #fff;
    background-color: #F2711C;
    &:hover, &.active {
      color: #fff;
      background-color: #f26202;
    }
  }
  &.yellow {
    color: #fff;
    background-color: #FBBD08;
    &:hover, &.active {
      color: #fff;
      background-color: #eaae00;
    }
  }
  &.olive {
    color: #fff;
    background-color: #B5CC18;
    &:hover, &.active {
      color: #fff;
      background-color: #a7bd0d;
    }
  }
  &.green {
    color: #fff;
    background-color: #21BA45;
    &:hover, &.active {
      color: #fff;
      background-color: #21BA45;
    }
  }
  &.teal {
    color: #fff;
    background-color: #00B5AD;
    &:hover, &.active {
      color: #fff;
      background-color: #009c95;
    }
  }
  &.blue {
    color: #fff;
    background-color: #2185D0;
    &:hover, &.active {
      color: #fff;
      background-color: #2185D0;
    }
  }
  &.violet {
    color: #fff;
    background-color: #6435C9;
    &:hover, &.active {
      color: #fff;
      background-color: #5829bb;
    }
  }
  &.purple {
    color: #fff;
    background-color: #A333C8;
    &:hover, &.active {
      color: #fff;
      background-color: #9627ba;
    }
  }
  &.pink {
    color: #fff;
    background-color: #E03997;
    &:hover, &.active {
      color: #fff;
      background-color: #e61a8d;
    }
  }
  &.brown {
    color: #fff;
    background-color: #A5673F;
    &:hover, &.active {
      color: #fff;
      background-color: #975b33;
    }
  }
  &.grey {
    color: #fff;
    background-color: #767676;
    &:hover, &.active {
      color: #fff;
      background-color: #838383;
    }
  }
  &.black {
    color: #fff;
    background-color: #1B1C1D;
    &:hover, &.active {
      color: #fff;
      background-color: #27292a;
    }
  }
}

.size-mini() {
  font-size: @base-font-size - 0.4;
}
.size-tiny() {
  font-size: @base-font-size - 0.3;
}
.size-small() {
  font-size: @base-font-size - 0.2;
}
.size-medium() {
  font-size: @base-font-size - 0.1;
}
.size-normal() {
  font-size: @base-font-size;
}
.size-large() {
  font-size: @base-font-size + 0.15;
}
.size-big() {
  font-size: @base-font-size + 0.25;
}
.size-huge() {
  font-size: @base-font-size + 0.35;
}
.size-massive() {
  font-size: @base-font-size + 0.45;
}

.disabled() {
  cursor: default;
  opacity: .55!important;
  background-image: none!important;
  box-shadow: none!important;
  pointer-events: none!important;
}

.flex(@v) {
  -webkit-flex: @v;
  -ms-flex: @v;
  flex: @v;
}

.flex-direction(@v) {
  -webkit-flex-direction: @v;
  -ms-flex-direction: @v;
  flex-direction: @v;
}

.transition(@v) {
  -webkit-transition: @v;
  -moz-transition: @v;
  transition: @v;
}

.align-items(@v) {
  -webkit-box-align: @v;
  -webkit-align-items: @v;
  -ms-flex-align: @v;
  align-items: @v;
}
.justify-content(@v) {
  -webkit-justify-content: @v;
  -ms-flex-pack: @v;
  justify-content: @v;
}

.icon-right() {
  z-index: 2;
  font-size: 1em;
  display: inline-block;
  cursor: default;
  position: absolute;
  line-height: 1em;
  text-align: center;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 2.6em;
  opacity: .5;
  border-radius: 0 @border-radius @border-radius 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;

  &:before, &:after {
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    margin-top: -.5em;
  }
}

.loading(@width) {
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -@width/2 0em 0em -@width/2;
    width: @width;
    height: @width;
    border-radius: 500rem;
    border: 0.2em solid rgba(0, 0, 0, 0.1);
  }
  &:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -@width/2 0em 0em -@width/2;
    width: @width;
    height: @width;
    -webkit-animation: button-spin 0.6s linear;
    animation: button-spin 0.6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #767676 transparent transparent;
    border-style: solid;
    border-width: 0.2em;
    box-shadow: 0px 0px 0px 1px transparent;
  }
}

